<template>

 <div>
        <h2>不是响应式的</h2>
        <p>　{{name}}　</p>
        <button @click="say()">点击</button>
        <h2>响应式的</h2>
        <p>　{{obj.username}}　</p>
        <button @click="click()">点击</button>
  <br>
        <button @click="add()">{{obj.count}}</button>
 </div>
</template>

<script>
// 导入 reactive
import {reactive} from 'vue'
export default {

  /* 
  
  直接修改是不会进行响应式的数据的
  响应式数据的定义：
  1、先引入 reactive
  2、通过 reactive 定义响应式数据
  3、return 返回数据
  */

  name: 'App',
  // setup 函数是 vue3 中专门为组件提供的新属性。 统一的入口
  // 他是在生命周期beforecreate之前触发的 ，所以不能拿到this,也就是说无法使用data和 methods数据和方法
  setup() {
    console.log("运行了 setup");

    // 定义变量
    let name = '张三'

    // 方法
    const say=()=>{
      console.log('你好我是'+name);
    }


    // 定义响应式的数据
    let obj =  reactive({
      username : '张三',
      count:0,
    })

    const click = ()=>{
      name='李四' // 这个是不会进行数据改变的
      obj.username = '李四'
    }

  const add= ()=>{
    obj.count++
  }

    //　在setup中定义的属性和方法是需要 return 出去的，这样我们就可以在模板中直接访问对象的属性和方法了
    return {name,say,click,obj,add}
  },
 
  beforeCreate(){
    console.log("运行了 beforCreate");
    
  }
}
</script>
